<template>
  <div class="header" :class="isShow ? 'on' : ''">
    <div class="headermain">
      <div class="header_left" :class="isShow ? 'on' : ''">
        <slot name="logo"></slot>
      </div>
      <div class="header_center" v-if="!isShow">
        <a href="javascript:;" @click="headerTitleClickHandle">
          <slot name="title"></slot
          ><!-- <i
            :class="'icon-' + $i18n.name[$store.state.lang]"
            class="header_center_country"
            v-if="menuItems.length > 0"
            ><span class="path1"></span><span class="path2"></span
            ><span class="path3"></span><span class="path4"></span
            ><span class="path5"></span><span class="path6"></span
            ><span class="path7"></span></i
          > --><i
            class=" icon"
            :class="isMenuShow ? 'icon-arrow-up-bold' : 'icon-arrow-down'"
            v-if="menuItems.length > 0"
          ></i>
        </a>
      </div>
      <div
        class="header_center"
        v-else
        @click="headerClickHandle"
        :title="this.$t('lang.返回页首')"
      >
        <span class="header_center_defaulttitle icon-arrow-up-bold"></span>
      </div>
      <div class="header_right" :class="isShow ? 'on' : ''">
        <slot name="rightMenu"></slot>
      </div>
    </div>
    <div
      class="headermenu animate__animated"
      v-if="isMenuShow"
      :class="isMenuShow ? 'animate__slideInDown' : ''"
    >
      <a
        href="javascript:;"
        @click="headMenuItemClickHandle(item, index)"
        v-for="(item, index) in menuItems"
        :key="'headMenuItem_' + index"
        :class="item.key === $store.state.lang ? 'on' : ''"
      >
        <slot :name="'headermenu_' + index" :item="item" :index="index"></slot>
      </a>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import { clearTimeout } from "timers";
export default {
  name: "Header",
  props: {
    menuItems: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      isShow: false,
      isMenuShow: false,
      timeout: null,
    };
  },
  mounted() {
    document.title = this.$t("lang." + this.$route.meta.title) + " - facebox";

    let that = this;
    window.addEventListener(
      "scroll",
      function(e) {
        let top = document.body.scrollTop || document.documentElement.scrollTop;
        if (top > 200) {
          that.isShow = true;
          that.isMenuShow = false;
        } else {
          that.isShow = false;
          that.isMenuShow = false;
        }
      },
      false
    );
  },
  methods: {
    headerClickHandle(e) {
      window.scrollTo(1, 1);
    },
    headerTitleClickHandle(e) {
      if (this.menuItems.length > 0) {
        this.isMenuShow = this.isMenuShow ? false : true;
      }
    },
    headMenuItemClickHandle(item, index) {
      console.log(item.key);
      switch (item.type) {
        case "lang":
          this.$i18n.locale = item.key;
          this.$store.commit("updateLang", item.key);
          Toast.loading({
            message: this.$t("lang.刷新页面中") + "...",
            forbidClick: true,
          });
          this.timeout && clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            location.reload();
          }, 500);
          break;
      }

      this.closeMenuHandle();
    },
    closeMenuHandle() {
      this.isMenuShow = false;
    },
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  z-index: 2000;
  text-align: center;
  height: 44 / @base;
  /*   border-bottom: 1 / @base solid #ccc;
  box-shadow: rgba(0, 0, 0, 0.3) 1 / @base 1 / @base 5 / @base;
 */
  .headermain {
    display: flex;
    height: 44 / @base;
    overflow: hidden;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1 / @base solid #ccc;
    /*     box-shadow: rgba(0, 0, 0, 0.2) 1 / @base 1 / @base 5 / @base;
 */
  }
  .headermenu {
    background-color: #fff;
    border-top: 1 / @base solid #ccc;
    border-bottom: 1 / @base solid #efefef;
    padding: 5 / @base 0;
    box-shadow: rgba(0, 0, 0, 0.2) 1 / @base 2 / @base 5 / @base;
    position: absolute;
    top: 44 / @base;
    left: 0;
    right: 0;
    a {
      display: block;
      padding: 10 / @base 0;
      border-bottom: 1 / @base solid #efefef;
      margin: 0 20 / @base;
      &.on {
        color: brown;
      }
      &:last-child {
        border: 0;
      }
    }
    z-index: 1;
  }
  &.on {
    .headermain {
      background-color: rgba(0, 0, 0, 0.5);
      border-bottom: 1 / @base solid rgba(0, 0, 0, 0.5);
      color: #fff;
    }
  }
  .header_left {
    width: 20%;
    &.on {
      a {
        color: #fff;
      }
    }
  }
  .header_center {
    width: 60%;
    a {
      i {
        &.icon {
          margin: 0 0 0 5 / @base;
          vertical-align: middle;
        }
        &.header_center_country {
          margin: 0 0 0 5 / @base;
          vertical-align: middle;
        }
      }
    }
    .header_center_defaulttitle {
      display: block;
      line-height: 45 / @base;
      font-size: 24 / @base;
    }
  }
  .header_right {
    width: 20%;
    &.on {
      a {
        color: #fff;
      }
    }
  }
}
</style>
